<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

</head>

<body>
    <!-- 商标以及部分导航入口 -->
<div class="all flexcss">
        <div style="float: left;">
                <img src="img/logo.jpg">
            </div>
            
            <div id="youshangjiaoweizhi">
                <div id="sanzhe">
                    <img src="img/icon_count.png">
                </div>
        
                <div id="topRightLabel">
                    <div style="padding: 0.5px">
                        <p></p>
                    </div>
        
                    <span>&nbsp;&nbsp;尾品汇&nbsp;&nbsp;&nbsp;
                                     当当优品&nbsp;&nbsp;&nbsp;
                                     数字馆&nbsp;&nbsp;&nbsp;
                                     都看阅器</span>
                </div>
        
            </div>

        <!-- 导航栏 -->
        </div >
                <div class="nav all">
                    <ul class="navUl">
                        <li class="navLiFirst">首页</li>
                        <li class="navLi">图书</li>
                        <li class="navLi">音像</li>
                        <li class="navLi">童装</li>
                        <li class="navLi">服装</li>
                        <li class="navLi">鞋靴</li>
                        <li class="navLi">运动</li>
                        <li class="navLi">箱包</li>
                        <li class="navLi">美妆</li>
                        <li class="navLi">珠宝</li>
                        <li class="navLi">家居</li>
                        <li class="navLi">食品</li>
                        <li class="navLi">酒</li>
                        <li class="navLi">手机</li>
                        <li class="navLi">数码</li>
                        <li class="navLi">电脑</li>
                        <li class="navLi">家电</li>
                    </ul>
    </div>
    <!-- 图书榜图片 -->
    <div class="all tushubangImg">
            <img src="img/banner.png" width="100%">
    </div>

    <!-- 畅销榜单 -->
    <div class="all changxiaobang flexcss">
        <div class="tushuchangxiaobangImg">
            <img src="img/bg_bang.gif" >
        </div>
        <div class="bookNO1Img">
                <img src="img/book-01.jpg" >
        </div>
        <div class="NO1Img">
                <img src="img/bookNo1.gif" >
        </div>
        <div class="touyingziderenjianjie">
            <a href="script:void(0)">
                <p>偷影子的人</p>
            </a>
            <p style="font-size: 13px">作 者：[法]马克·李维(Marc Levy) 著</p>
            <p style="font-size: 13px">出版社：湖南文艺出版社</p>
            <p style="font-size: 13px">当当价： <span style="color: #4D0000">￥ 17.90</span></p>
            <p style="font-size: 13px;line-height: 30px" >不知道姓氏的克蕾儿。这就是你在我生命里的角色，

                    我童年时的小女孩，今日蜕变成了女人，一段青梅足马
                    
                    的回忆。一个时间之神没有应允的愿望。一个老是
                    
                    受班上同学欺负的瘦弱小男孩，因为拥有一种特殊能力而强大:他能"偷别人的影子"</p>
             </div>

             <div class="bookNO2Img">
                     <img src="img/book-02.jpg" width="130px" >
             </div>
        <div class="NO2Img">
                <img src="img/bookNo2.gif" >
        </div>
        <div class="bookNo2AndNo3Jianjie">
            <a  href="script:void(0)">
                <p>看见(央视知名记者、主持人柴静：十年个人成长的告白，中国社会变迁的备忘)</p>
            </a>
            <p style="font-size: 13px">作 者：柴静 著</p>
            <p style="font-size: 13px">出版社：广西师范大学出版社</p>
            <p style="font-size: 13px ;color: #4D0000">￥ 29.40 </p>

            <p style="font-size: 13px">改变孩子先改变自己</p>
            <p style="font-size: 13px">作 者：贾容韬 贾毅 著</p>
            <p style="font-size: 13px">出版社：作家出版社</p>
            <p style="font-size: 13px;color: #4D0000" >￥ 22.70</p>
        </div>
        <div class="bookNO3Img">
                <img src="img/book-03.jpg" width="130px" >
        </div>
        <div class="no3Img">
                <img src="img/bookNo3.gif" >
        </div>
    </div>
    <!-- 经营许可 -->
    <div class="jingyingxuke">
        <p style="font-size: 15px">Copyright(C) 当当网 2004-2017,All Rights Reserved 
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;京ICP证041189号出版物经营许可证 
            新出发京批字第直0673号</p>
            <div class="validateImg">
                <img src="img/validate.gif" >
            </div>
    </div>

</body>
<style>
    .validateImg{
        position: absolute;
        left: 363px;
        top:-12px;
    }
    .jingyingxuke{
        position: relative;
        margin:0 auto;
        width:70%;
    }
    .bookNO3Img{
        position: absolute;
        left: 680px;
        top:250px;
    }
    .no3Img{
        position: absolute;
        left: 690px;
        top:250px;
    }
    .bookNo2AndNo3Jianjie{
        position: absolute;
        left: 830px;
        top:90px;
        width: 30%;
    }
    .bookNO2Img{
        position: absolute;
        left: 680px;
        top:90px;
    }
    .NO2Img{
        position: absolute;
        left: 690px;
        top:90px;
    }
    .touyingziderenjianjie{
        width: 32%;
        position: absolute;
        left: 300px;
        top:90px;
    }

    .tushuchangxiaobangImg{
        position: absolute;
        left: -13px;
        top:20px;
    }
    .NO1Img{
        position: absolute;
        left: 22px;
        top:80px;
    }
    .bookNO1Img{
        position: absolute;
        left: 4px;
        top:90px;
    }

    .changxiaobang{
        margin-top: 20px;
        border: 1px solid #02F78E;
        width: 95%;
        height: 400px;
        position: relative;
    }

    .tushubangImg{
        margin-top: 20px;
    }
    .all {
        margin-left: 30px;
        margin-right: 30px;
    }
    .flexcss{
        display: flex;
    }

    #youshangjiaoweizhi {
        position: relative;
        left: 66%;
        height: 30px;
        width: 300px;
    }

    .top {
        border: 10px, 10px, 10px, 10px;
    }

    #topRightLabel {
        background: #D9FFFF;
        height: 50px;
        border-left: 1px solid #1AFD9C;
        border-top: 1px solid #1AFD9C;
        border-right: 1px solid #1AFD9C;
    }

    #sanzhe {
        position: absolute;
        top: -5px;
        left: 10px;
    }

    .nav {
        margin-top: 10px;
        height: 40px;
        background: #F75000;
        margin-right: 37px;
    }
    .navUl{
        list-style:none; /* 将默认的列表符号去掉 */
        padding:0; /* 将默认的内边距去掉 */
        margin:0; /* 将默认的外边距去掉 */
    }
    .navLi{
        color: #FFFFFF;
        float:left;
        padding-left: 38px;
        padding-top: 10px;
    }
    .navLiFirst{
        color: #FFFFFF;
        float:left;
        padding-left: 20px;
        padding-top: 10px;
    }
</style>

</html>